<template>
  <!-- 进度条 -->
  <div class="end_time">
    <div class="current_time">
      {{ info.current_time | time_filer }}
    </div>
    <van-slider
      v-model="value"
      bar-height="4px"
      active-color="#008c8c"
      :min="0"
      :max="info.duration"
      button-size="14px"
      @drag-start="is_dray = true"
      @drag-end="is_dray = false"
      @change="change_current_time"
    />

    <div class="duration">
      {{ info.duration | time_filer }}
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";

export default {
  data() {
    return {
      value: 0,
      is_dray: false,
    };
  },
  computed: {
    ...mapState({
      info: "current_song_info",
    }),
  },
  watch: {
    info: {
      handler(new_value) {
        if (!this.is_dray) {
          this.value = new_value.current_time;
        }
      },
      immediate: true,
    },
  },
  methods: {
    change_current_time(val) {
      this.$audio.currentTime = val;

      // 触发bus 去通知 lyric组件
      this.$bus.$emit("drag_end");
    },
  },

  filters: {
    time_filer(val) {
      if (!val) {
        val = 0;
      }
      let m = parseInt(val / 60)
        .toString()
        .padStart(2, 0);
      let s = parseInt(val % 60)
        .toString()
        .padStart(2, 0);
      return m + ":" + s;
    },
  },
};
</script>

<style lang="scss" scoped>
.end_time {
  position: fixed;
  bottom: 22%;
  display: flex;
  left: 53%;
  width: 100%;
  transform: translateX(-50%);
  align-items: center;
  font-weight: bold;
  .van-slider {
    width: 68%;
    margin: 0 10px;
  }
}
</style>
